<template>
    <!-- <div class="article-item">
    </div> -->
    <van-cell class="article-item"
    :to="{
      name:'article',
      params:{
        articleId: article.art_id
      }
    }">
      <div class="title van-multi-ellipsis--l3" slot="title" >{{article.title}}</div>
      <div slot="label">
        <div class="cover-wrap">
          <div class="cover-wrap-item" v-if="article.cover.type===3" v-for="(img,index) in article.cover.images" :key="index">
            <van-image class="cover-item" fit="cover"  :src="img"></van-image>
          </div>
        </div>
        <div class="label-wrap">
          <span>{{ article.aut_name}}</span>
          <span>{{ article.collect_count}} 评论</span>
          <span>{{ article.pubdate | relativeTime}}</span>
        </div>
      </div>
      <van-image class="right-cover" fit="cover" v-if="article.cover.type===1" :src="article.cover.images[0]"></van-image>
    </van-cell>
</template>
<script>
export default {
   name: 'articleItem',
   props:{
     article:{
       type:Object,
       required:true
     }
   },
   data() {
      return {
      }
   },
   methods: {
   }
}
</script>
<style lang="scss" scoped>
.article-item{
  .title{
    font-size: 16px;
    color:#3a3a3a;
    
  }
  ::v-deep .van-cell__value{
    flex:unset;
    width: 116px;
    height: 73px ;
    margin-left: 12px;
  }
  .right-cover{
    width: 116px;
    height: 73px;
  }
  .cover-wrap{
    padding:15px 0;
    display: flex;
    .cover-wrap-item{
    flex:1;
    height:73px;
    padding-right: 4px;
    :last-child{
      padding-right: 0;
    }
    .cover-item{
      width: 100%;
      height: 73px;
    }
  }
  }
  .label-wrap{
    font-size: 11px;
    color:#b4b4b4;
    span{
      margin-right:12px;
    }
  }
}
</style>
